<template>
  <div>
    <div style="text-align: center">
      <span>infoWindow</span>
      <div>
        vue
      </div>
    </div>
    <button @click="create">创建窗口</button>
    <info-window
      v-for="(item, index) in windowList"
      :key="index"
      :title="item.title"
      :windowX="item.x"
      :windowY="item.y"
      :html="item.html"
      :id="item.id"
      @close="close"
    ></info-window>
  </div>
</template>
<script>
import infoWindow from "./infoWindow";
export default {
  data() {
    return {
      windowList: []
    };
  },
  methods: {
    create() {
      this.windowList.push({
        title: "窗口" + this.windowList.length,
        x: 100 + this.windowList.length * 50,
        y: 100 + this.windowList.length * 50,
        html: `<div>test${this.windowList.length}</div>`,
        id: Math.random()
      });
    },
    close(id) {
      this.windowList = this.windowList.filter(item => {
        return item.id != id;
      });
    }
  },
  components: { infoWindow }
};
</script>
<style scoped></style>
